$baseFont: 37.5;

@function parseInt($n) {
  @return $n / ($n * 0 + 1); /* 2 */
}

@function rem($px) {
  $list: ();
  @each $item in $px {
    @if $item == 0 or $item == auto {
      $list: append($list, $item);
    } @else {
      $unit: unit($item);
      $val: parseInt($item);

      @if $unit == px {
        $list: append($list, ($val / $baseFont + rem))
      }

      @if $unit == rem {
        $list: append($list, $item);
      }
    }
  }
  @return $list;
}

@import "mixin";

.switches {
  position: fixed;
  top: 0;
  width: 100%;
  height: rem(45px);
  >.switches-wrapper {
    padding: rem(8px) 0;
    background-color: #fff;
    font-size: 0;
    text-align: center;
    @include border-bottom-1px(#e5e5e5);
    >li {
      display: inline-block;
      vertical-align: middle;
      width: rem(100px);
      height: rem(29px);
      line-height: rem(29px);
      background-color: #fff;
      border: rem(1px) solid #dc3838;
      border-radius: rem(4px) 0 0 rem(4px);
      font-size: rem(12px);
      color: #dc3838;
      &.active {
        border: none;
        background-color: #dc3838;
        color: #ffffff;
      }
      &:nth-child(2) {
        border-radius: 0 rem(4px) rem(4px) 0;
      }
    }
  }
}

.tabs {
  position: fixed;
  top: rem(45px);
  bottom: rem(80px);
  width: 100%;
  height: rem(35px);
  background-color: #fafafa;
  overflow: hidden;
  >.tabs-container {
    >.tabs-wrapper {
      height: rem(35px);
      >li {
        float: left;
        display: inline-block;
        box-sizing: border-box;
        height: rem(35px);
        padding: 0 rem(15px);
        //text-align: center;
        line-height: rem(35px);
        font-size: rem(14px);
        color: #999999;
      }
    }
  }
  >.nav-swiper-container {
    >.swiper-wrapper {
      >.swiper-slide {
        float: left;
        display: inline-block;
        box-sizing: border-box;
        width: auto;
        height: rem(35px);
        padding: 0 rem(15px);
        //text-align: center;
        line-height: rem(35px);
        font-size: rem(14px);
        color: #999999;
      }
    }
  }
}
.plat-item-wrapper {
  position: relative;
  top: rem(80px);
  >.plat-item {
    width: 100%;
    height: rem(116px);
    font-size: 0;
    >.plat-item-header {
      display: flex;
      width: 100%;
      height: rem(60px);
      line-height: rem(60px);
      >.plat-logo-wrapper {
        position: relative;
        flex: 1;
        text-align: center;
        >img {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateY(-50%) translateX(-50%);
          width: rem(110px);
          height: rem(32px);
        }
      }
      >.tags-wrapper {
        flex: 1;
        font-size: 0;
        >.tag {
          margin-left: rem(4px);
          border: rem(1px) solid #dc3838;
          border-radius: rem(2px);
          padding: rem(2px);
          font-size: rem(12px);
          color: #dc3838;
        }
      }
      >.profit-wrapper {
        flex: 1;
        line-height: rem(54px);
        font-size: 0;
        >span {
          font-size: rem(12px);
          color: #999;
        }
        >.profit {
          color: #dc3838;
          >em {
            font-style: normal;
            font-size: rem(24px);
          }
        }
      }
    }
    >.plat-item-body {
      display: flex;
      height: rem(56px);
      >.return-money {
        flex: 1;
        >span {
          display: inline-block;
          width: 100%;
          text-align: center;
          font-size: rem(12px);
          color: #999;
          &:nth-child(1) {
            color: #333333;
            >em {
              font-style: normal;
              font-size: rem(16px);
            }
          }
        }
      }
      >.invest-money {
        flex: 1;
      }
      >.invest-time {
        flex: 1;
      }
    }
  }
}